<template>
    <div class="main">
        <h1>源码：https://codepen.io/yuhomyan/pen/OJMejWJ</h1>
        <h1>Animation Buttons</h1>
        <p>Hover us and enjoy the satisfying neumorphic animation designs!</p>
        <div class="frame">
            <button class="custom-btn btn-1 ">第一个按钮</button>
            <button class="custom-btn btn-2">第一个按钮</button>
            <button class="custom-btn btn-3">第一个按钮</button>
            <button class="custom-btn">第一个按钮</button>
            <button class="custom-btn">第一个按钮</button>
            <button class="custom-btn">第一个按钮</button>
            <button class="custom-btn">第一个按钮</button>
            <button class="custom-btn">第一个按钮</button>
            <button class="custom-btn">第一个按钮</button>
            <button class="custom-btn">第一个按钮</button>
            <button class="custom-btn">第一个按钮</button>
            <button class="custom-btn">第一个按钮</button>
            <button class="custom-btn">第一个按钮</button>
            <button class="custom-btn">第一个按钮</button>
            <button class="custom-btn">第一个按钮</button>
            <button class="custom-btn">第一个按钮</button>

        </div>
    </div>
</template>
<style>
body {
    background: #e0e5ec;
}

.main {
    /* width: 1000px; */
    background: #e0e5ec;
    height: 1000px;
}

h1 {
    text-align: center;
    color: #353535;
    font-size: 50px;
    font-family: "Cormorant Garamond", serif;
}

p {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    text-align: center;
    font-size: 18px;
    color: #676767;
}

.main .frame {
    width: 90%;
    height: 500px;
    margin: 40px auto 0px;
    border: 1px solid black;

}

.main .frame button {
    margin: 20px;
}

.main .frame button.custom-btn {
    width: 130px;
    height: 40px;
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    /**背景透明 */
    background: transparent;
    /*鼠标移上去的形状 */
    cursor: pointer;
    transition: all 0.3s ease;
    /**向框添加一个或多个阴影 inset:将外部阴影改为内部阴影 */
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
    ;
    outline: none;
}

/**第一个按钮 */
.main .frame button.btn-1 {
    background: rgb(6, 14, 131);
    background: linear-gradient(0deg, rgba(6, 14, 131, 1) 0%, rgba(12, 25, 180, 1) 100%);
    border: none;
}

.main .frame button.btn-1:hover {
    background: rgb(0, 3, 255);
    background: linear-gradient(0deg, rgba(0, 3, 255, 1) 0%, rgba(2, 126, 251, 1)100%);
}

/* 第二个按钮 */
.main .frame button.btn-2 {
    background: rgb(96, 9, 240);
    background: linear-gradient(0deg, rgba(96, 9, 240, 1) 0%, rgba(129, 5, 240, 1) 100%);
    border: none;
}

.main .frame button.btn-2:hover {
    box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .5),
        -4px -4px 6px 0 rgba(116, 125, 136, .5),
        inset -4px -4px 6px 0 rgba(255, 255, 255, .2),
        inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}

/* .main .frame button.btn-2:before {
    height: 0%;
    width: 2px;
} */
.main .frame button.btn-3 {
    background: rgb(0, 172, 238);
    background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
    border: none;
}

.main .frame button.btn-3:hover {
    background: rgba(2, 126, 251, 1);
    background: transparent;
    box-shadow: none;
}
</style>